<template>
    <div class="container">
      <div class="tips-title">1.基础用法</div>
      <el-card>
        <div slot="header">
          <span>卡片名称</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
      <div class="tips-title">2.简单卡片</div>
      <el-card>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
      <div class="tips-title">3.带图片</div>
      <el-row>
        <el-col :span="4" v-for="(o, index) in 3" :key="o" :offset="1">
          <el-card :body-style="{ padding: '0px' }">
            <img src="../../../../static/images/card-test-pic.png" class="image">
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="tips-title">4.卡片阴影</div>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="always">
            总是显示
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            鼠标悬浮时显示
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never">
            从不显示
          </el-card>
        </el-col>
      </el-row>
      <br><br><br>
    </div>
</template>
<script>
  import { dateFormat } from '@/utils/string'
  export default {
    name: 'o-card',
    data() {
      return {

      }
    },
    computed: {
      currentDate: function () {
        let date = new Date()
        return dateFormat(date)
      }
    }
  }
</script>
<style>
</style>
